<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">{{ pageTitle }}</div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <!--查询-->
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">仓库</div>
          <div class="col-8">
            <simple-filter-select :options="$d.whDropdownList" :readonly="listDataLoadingState" :use-filter="false"
              option-label="whName" option-value="whId" v-model="fpsReq.whId" @update:model-value="onWhChanged" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">储区</div>
          <div class="col-8">
            <simple-filter-select v-model="fpsReq.zoneId"
              :options="fpsReq.whId ? $d.zoneDropdownListByWhId : $d.zoneDropdownList" :use-filter="false"
              :auto-select-single-option="false" :readonly="listDataLoadingState" option-label="zoneName"
              option-value="zoneId" @update:model-value="onZoneChanged" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">储位</div>
          <div class="col-8">
            <simple-filter-select v-model="fpsReq.locId" :use-filter="false"
              :auto-select-single-option="false" :readonly="listDataLoadingState"
              option-label="loc"
              option-value="locId"
              :options="$d.locDropdownList"
              server-side-url="/wms/basic/loc/get-loc-simple-list"
              search-content-field="loc"
              resp-data-field="locs"
              :req-params="{pageNo:1,pageSize:10,whId:fpsReq.whId,zoneId:fpsReq.zoneId}"
            />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">料号</div>
          <div class="col-8">
            <wm-sku-selector :sku="fpsReq.sku" @sku-selected="onSkuSelected"
              v-model="fpsReq.skuId" :readonly="listDataLoadingState"></wm-sku-selector>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">箱号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.vLpn" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">托盘号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.palletNo" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">短收类型</div>
          <div class="col-8">
            <simple-filter-select :auto-select-single-option="false" :options="$d.stateDropdownList"
              v-model="fpsReq.shortInvType" :use-filter="false" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">ShipmentNo</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.shipmentNo" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">原托盘号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.originalPalletNo" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)" ></easy-input>
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn :disable="listDataLoadingState" @click="loadListData(2)" color="primary" icon="search" label="查询" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table :columns="fpsInfo.columnsInfo" :rows="$d.tableData" :hide-pagination="true"
        :loading="listDataLoadingState" row-key="invLocId"
        :visible-columns="fpsInfo.visibleColumns" @request="fpsAssist.onDataTableRequest"
        v-model:pagination="fpsInfo.paginationInfo" v-model:selected="$d.selectedItems"
        binary-state-sort color="primary" dense flat separator="cell">
        <template v-slot:top="props">
          <!--功能按钮-->
          <div class="q-gutter-sm">
            <q-btn :disable="listDataLoadingState" @click="onReturnSapInventoryAdjustment" color="primary" label="手动发送短收数据到SAP"
              v-if="fx.hasModifyRight('Wms.Inv.Inventory.ReturnSapInventoryAdjustment')" />
          </div>
          <q-space />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
            v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
            @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
            :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <span class="full-width text-center">
            <q-icon name="error_outline" />
            无数据
            <q-btn flat icon="refresh" :loading="listDataLoadingState"
              :disable="listDataLoadingState" dense title="刷新" size="sm" class="q-ml-sm" @click="loadListData"></q-btn>
            </span>
        </template>
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
            :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
            @go-to-page="fpsNav.gotoPage" />
        </template>
        <template v-slot:body-cell-shortInvType="props">
          <q-td :props="props" auto-width>
            <span v-if="props.row.shortInvType === '802'">理货短收</span>
            <span v-if="props.row.shortInvType === '702'">贴标短收</span>
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog transition-hide="none" transition-show="none" v-model="returnSapInventoryAdjustmentDlg">
      <q-card style="max-width: 400px; width: 100%">
        <q-card-section class="q-pa-sm">
          <div class="text-h6">手动发送短收数据到SAP</div>
        </q-card-section>
        <q-banner class="text-white bg-red" dense inline-actions v-if="serverErrorMessageCheck">
          {{ serverErrorMessageCheck }}
          <template v-slot:action>
            <q-btn @click="serverErrorMessageCheck = ''" dense flat icon="close" size="sm" />
          </template>
        </q-banner>
        <q-separator />
        <q-card-section class="q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-icon color="red" name="fas fa-asterisk" size="10px" />
              <span>短收类型</span>
              <simple-filter-select :auto-select-single-option="false" :options="$d.stateDropdownList"
                v-model="$d.form.shortInvType" :use-filter="false" />
            </div>
            <div class="col-12">
              <q-icon color="red" name="fas fa-asterisk" size="10px" />
              <span v-if="$d.form.shortInvType === '802'">ShipmentNo</span>
              <span v-else>原托盘号</span>
              <easy-input v-model="$d.form.shipmentNoOrOriginalPalletNo"/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="separator" />
        <q-card-actions align="right">
          <q-btn @click="returnSapInventoryAdjustment" color="primary" label="确定" :loading="returnSapInventoryAdjustmentState" :disable="!$d.form.shipmentNoOrOriginalPalletNo || !$d.form.shortInvType" />
          <q-btn color="primary" label="取消" unelevated v-close-popup outline :disable="returnSapInventoryAdjustmentState" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>
<script setup lang="ts">
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {reactive, ref} from 'vue'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {WmWhLite} from '@njt/wms/defs/basic/wh'
import {WmLoc} from '@njt/wms/defs/basic/loc'
import { useRoute } from 'vue-router';
import {
  GetVirtualLocInventoryListReq,
  GetVirtualLocInventoryListResp,
  VirtualLocInventoryInfo
} from 'src/defs/Inventory';
import { WmZoneLite } from '@njt/wms/defs/basic/zone.d';
import WmSkuSelector from '@njt/wms/components/SkuSelector.vue';
import { WmSkuLite } from '@njt/wms/defs/basic/sku';

const pageTitle = '库存短收'
useTitleHelper(pageTitle)
let listDataLoadingState = ref(false)

let fpsReq: GetVirtualLocInventoryListReq = reactive({
  sku: null,
  whId: null,
  zoneId: null,
  locId: null,
  skuId: null,
  vLpn: null,
  palletNo: null,
  shortInvType: null,
  shipmentNo: null,
  originalPalletNo: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null,
})

// 列参数
const columnsDefine: ColumnInfo[] = [
  {
    label: '库存ID',
    name: 'invLocId',
    field: 'invLocId',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '仓库',
    name: 'whId',
    field: 'whId',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: false
  },
  {
    label: '仓库名称',
    name: 'whName',
    field: 'whName',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true
  },
  {
    label: '批号',
    name: 'lot',
    field: 'lot',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '箱号',
    name: 'vLpn',
    field: 'vLpn',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '储区ID',
    name: 'zoneId',
    field: 'zoneId',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: false
  },
  {
    label: '储区名称',
    name: 'zoneName',
    field: 'zoneName',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },
  {
    label: '储位ID',
    name: 'locId',
    field: 'locId',
    align: 'left',
    defOrder: 8,
    sortable: false,
    defVisible: false
  },
  {
    label: '储位名称',
    name: 'loc',
    field: 'loc',
    align: 'left',
    defOrder: 9,
    sortable: false,
    defVisible: true
  },
  {
    label: '料号ID',
    name: 'skuId',
    field: 'skuId',
    align: 'left',
    defOrder: 10,
    sortable: false,
    defVisible: false
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 11,
    sortable: false,
    defVisible: true
  },
  {
    label: '品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 12,
    sortable: false,
    defVisible: true
  },
  {
    label: '托盘号',
    name: 'palletNo',
    field: 'palletNo',
    align: 'left',
    defOrder: 13,
    sortable: false,
    defVisible: true
  },
  {
    label: 'SAP可见',
    name: 'sapVisible',
    field: 'sapVisible',
    align: 'left',
    defOrder: 14,
    sortable: false,
    defVisible: true,
    format: (val: boolean) => {
      return val === true ? '是' : val === false ? '否' : ''
    }
  },
  {
    label: '短收类型',
    name: 'shortInvType',
    field: 'shortInvType',
    align: 'left',
    defOrder: 15,
    sortable: false,
    defVisible: true
  },
  {
    label: '原托盘号',
    name: 'originalPalletNo',
    field: 'originalPalletNo',
    align: 'left',
    defOrder: 16,
    sortable: false,
    defVisible: true
  },
  {
    label: 'ShipmentNo',
    name: 'shipmentNo',
    field: 'shipmentNo',
    align: 'left',
    defOrder: 17,
    sortable: false,
    defVisible: true
  },
  {
    label: 'Batch',
    name: 'batch',
    field: 'batch',
    align: 'left',
    defOrder: 18,
    sortable: false,
    defVisible: true
  },
  {
    label: '数量',
    name: 'qty',
    field: 'qty',
    align: 'left',
    defOrder: 19,
    sortable: false,
    defVisible: true
  },
  {
    label: '单件装量',
    name: 'qtyPEa',
    field: 'qtyPEa',
    align: 'left',
    defOrder: 20,
    sortable: false,
    defVisible: true
  },
  {
    label: '已配数量',
    name: 'qtyAllocated',
    field: 'qtyAllocated',
    align: 'left',
    defOrder: 21,
    sortable: false,
    defVisible: true
  },
  {
    label: '已拣数量',
    name: 'qtyPicked',
    field: 'qtyPicked',
    align: 'left',
    defOrder: 22,
    sortable: false,
    defVisible: true
  },
  {
    label: '已冻结数量',
    name: 'qtyHold',
    field: 'qtyHold',
    align: 'left',
    defOrder: 23,
    sortable: false,
    defVisible: true
  },
  {
    label: 'MOl数量',
    name: 'mol',
    field: 'mol',
    align: 'left',
    defOrder: 24,
    sortable: false,
    defVisible: true
  }
]

const $d = reactive({
  form: {
    shortInvType: null,
    shipmentNoOrOriginalPalletNo: null
  },
  // 储区下拉
  zoneDropdownList: [] as WmZoneLite[],
  //储区下拉仓库联动
  zoneDropdownListByWhId: [] as WmZoneLite[],
  locDropdownList: [] as WmLoc[],
  tableData: [] as VirtualLocInventoryInfo[],
  // 多选数据源
  selectedItems: [] as VirtualLocInventoryInfo[],
  // 仓库下拉
  whDropdownList: [] as WmWhLite[],
  // 状态下拉
  stateDropdownList: [
    {
      label: '理货短收',
      value: '802'
    },
    {
      label: '贴标短收',
      value: '702'
    }
  ],
})

const loadListData = (resetFpsReq?: number) => {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios.get<GetVirtualLocInventoryListResp>('/project/mhlbc/inv/inventory/get-virtual-loc-inventory-list', {params: fpsReq})
    .then((result) => {
      fpsAssist.handleGenericFpsResp(result.data)
      $d.tableData = result.data.virtualLocInventoryInfos
      fpsAssist.saveFpsReq(fpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}


const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('/wms/inv/inventory-list',
  null,
  null,
  null,
  fpsReq, columnsDefine,
  null,
  loadListData)

let returnSapInventoryAdjustmentDlg = ref(false)
let serverErrorMessageCheck = ref('')
let returnSapInventoryAdjustmentState = ref(false)

const onReturnSapInventoryAdjustment = () => {
  $d.form.shipmentNoOrOriginalPalletNo = null
  $d.form.shortInvType = null
  returnSapInventoryAdjustmentDlg.value = true
}

const returnSapInventoryAdjustment = () => {
  serverErrorMessageCheck.value = ''
  returnSapInventoryAdjustmentState.value = true
  $f.axios.post('/project/mhlbc/inv/inventory/send-virtual-loc-inventory-to-sap-handly', $d.form)
    .then(() => {
      $f.ui.closeMsgBox()
      loadListData()
      $f.ui.showNotifySucceeded('发送成功')
    })
    .catch((err) =>{
      serverErrorMessageCheck.value = $f.getAxiosErrMsg(err)
    })
    .finally(() => {
      returnSapInventoryAdjustmentState.value = false
    })
}

// 仓库变更
const onWhChanged = function (value: number) {
  fpsReq.zoneId = null
  fpsReq.locId = null
  void $f.lst.getZoneSimpleList(value)
    .then((resp) => {
      $d.zoneDropdownListByWhId = resp.zones
    })
}

const onZoneChanged = function () {
  // 储区变更
  fpsReq.locId = null
}

// 料号选择器返回
const onSkuSelected = function (skuInfo: WmSkuLite) {
  fpsReq.sku = skuInfo?.sku ?? null
  fpsReq.skuId = skuInfo?.skuId ?? null
}


// 仓库下拉
void $f.lst.getWmWhSimpleList()
  .then((resp) => {
    $d.whDropdownList = resp
  })

// 储区数据源
void $f.lst.getZoneSimpleList(null)
  .then((resp) => {
    $d.zoneDropdownList = resp.zones
  })

const route = useRoute()
let params = route.query
if (params) {
  $f.misc.simpleAssign(fpsReq, params)
}
const fx = $f
</script>
